<template>
    <el-card shadow="never">
        <div slot="header">动态表单(rate)</div>
        <DynamicForm :schema="schema" :formData="formData"></DynamicForm>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
    </el-card>
</template>

<script>
import CodeTpl from './md/rate.md';

export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            schema: {
                properties: {
                    num1: {
                        label: '禁用',
                        widget: 'rate',
                        ui: {
                            disabled: true
                        }
                    },
                    num2: {
                        label: '颜色',
                        widget: 'rate',
                        ui: {
                            colors: ['#99A9BF', '#F7BA2A', '#FF9900']
                        }
                    },
                    num3: {
                        label: '辅助文字',
                        widget: 'rate',
                        ui: {
                            showText: true,
                            textColor: '#ff9900',
                            texts: ['极差', '失望', '一般', '满意', '惊喜']
                        }
                    },
                    num4: {
                        label: '图标',
                        widget: 'rate',
                        ui: {
                            voidIconClass: "el-icon-goblet",
                            colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
                            iconClasses: ['el-icon-goblet-square', 'el-icon-goblet-full', 'el-icon-goblet-square-full']
                        }
                    }
                },
                grid: {
                    row: {
                        gutter: 20
                    },
                    col: {
                        span: 8
                    }
                }
            },
            formData: { 
                num1: 3
            }
        }
    }
}
</script>

<style>

</style>